<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <input type="text" v-model="msg">{{msg}}
    </div>
    <!-- 
        钩子函数
            创建 beforeCreate created
            挂载 beforeMount  mounted
            更新 beforeUpdate update
            销毁 beforeDestroy destroyed
     -->
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                msg:"钩子函数"
            },
            // 创建前  
            beforeCreate() {
               console.group('------beforeCreate-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 创建后  
            created() {
               console.group('------created-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 挂载前  
            beforeMount() {
               console.group('------beforeMount-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 挂载后  
            mounted() {
               console.group('------mounted-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 更新前  
            beforeUpdate() {
               console.group('------beforeUpdate-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 更新后  
            update() {
               console.group('------update-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 销毁前  
            beforeDestroy() {
               console.group('------beforeDestroy-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            // 销毁后  
            destroyed() {
               console.group('------destroyed-----');
               console.log("el:",this.$el,"data:",this.$data,"msg:",this.msg);
            },
            
        })
    </script>
</body>

</html>